<template>
    <div class="nav">
        <div class="title-box">
            <p class="title">微擎后台管理</p>
        </div>

        <div 
            v-for="(item, index) in navInfo"
            :key="index"
             class="operation"
             :class="item.isChoose ? 'ope-choose' : 'ope-not-choose'"
             :ref="item.value"
             @click="chooseNav(item)"
             >
            <div class="main-box">
                <div class="icon-box">
                    <span class="iconfont icon" :class="item.iconClass"></span>
                </div>
                <div class="name-box">
                    <p class="operation-name">{{ item.label }}</p>
                </div>    
            </div>
            <div class="second-nav-box" v-show="item.secondNavShow">
                <div class="second-nav-list-box" >
                    <div class="kind-name-box" @click.stop="chooseNav(item, secondNav)" v-for="(secondNav, index1) in item.children" :key="index1">
                        <i class="el-icon-info"  :style="{color: secondNav.isChoose ? 'white' : '#8AA4AF'}"></i>
                        <p :style="{color: secondNav.isChoose ? 'white' : '#8AA4AF'}">{{ secondNav.secondNavName }}</p>
                    </div>
                </div>  
            </div>
        </div>


    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Nav',
    data () {
        return {
            allKind: [],
            nowSecondNavNum: 0,
            navInfo: [
                {
                    value: 'page',
                    label: '首页',
                    children: [],
                    iconClass: 'icon-shouye1-copy',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'app',
                    label: '应用设置',
                    children: [],
                    iconClass: 'icon-yingyong',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'appKind',
                    label: '分类设置',
                    children: [],
                    iconClass: 'icon-leimupinleifenleileibie',
                    secondNavShow: false,
                    isChoose: false
                }, 
                {
                    value: 'certifyNeed',
                    label: '认证信息',
                    children: [],
                    iconClass: 'icon-renzheng',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'question',
                    label: '问题管理',
                    children: [],
                    iconClass: 'icon-wenti-',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'userInfo',
                    label: '用户管理',
                    children: [],
                    iconClass: 'icon-yonghu',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'cashNote',
                    label: '提现记录',
                    children: [],
                    iconClass: 'icon-tixian',
                    secondNavShow: false,
                    isChoose: false
                }, 
                {
                    value: 'answer',
                    label: '答案管理',
                    children: [],
                    iconClass: 'icon-daan',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'check',
                    label: '认证审核',
                    children: [],
                    iconClass: 'icon-shenhe1',
                    secondNavShow: false,
                    isChoose: false
                },
                {
                    value: 'expert',
                    label: '专家管理',
                    children: [],
                    iconClass: 'icon-zhuanjia',
                    secondNavShow: false,
                    isChoose: false
                }

            ]
        }
    },
    mounted() {
        const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.9)'
        });
        var allPromise = Promise.all([this.loadAllAppKind()]);
        allPromise.then(() => {
            this.listenRoute();
            loading.close();
        }, (err) => {
            loading.close();
            console.log(err);
        });
        
    },
    methods: {
        loadAllAppKind () {
            var that = this;
            return new Promise(function (resolve, reject) {
                var allNav = that.navInfo;
                axios.get('/index/AppKind/getAllAppKind')
                .then((datas) => {
                    var data = datas.data;
                    if (data.status === 0) {
                        that.allKind = data.data;
                        for (let i = 0; i < data.data.length; i ++) {
                            data.data[i].secondNavName = data.data[i].kindName;
                            data.data[i].isChoose = false;
                        }
                        for (let i = 0; i < allNav.length; i ++) {
                            if (allNav[i].value === 'certifyNeed') {
                                allNav[i].children = data.data;
                            }
                        }

                    }
                    else {

                    }
                    
                    resolve();
                }, (err) => {
                    reject(err);
                });
            });
           
        },
        chooseNav (nav, secondNav) {
           
            var route = nav.value;
            
            var navInfo = this.navInfo;
            for (let i = 0; i < navInfo.length; i ++) {
                if (navInfo[i].value === route && navInfo[i].children.length > 0) {
                    navInfo[i].secondNavShow = true;
                }
                else {
                    navInfo[i].secondNavShow = false;
                }
            }
            if (secondNav) {
                route += `?param=${secondNav.secondNavName}`;
                
            }
            
            this.$router.push(route);
           
        },
        listenRoute() {
            
            // this.$store.commit('showLoading');
            //监听路由
            var route = this.$route;
            var routePath = route.name;
            var param = route.query.param;
            var navInfo = this.navInfo;
            
            for (let i = 0; i < navInfo.length; i ++) {
                navInfo[i].isChoose = navInfo[i].value === routePath;
                navInfo[i].secondNavShow = navInfo[i].isChoose && navInfo[i].children.length > 0;

                for (let j = 0; j < navInfo[i].children.length; j ++) {
                    navInfo[i].children[j].isChoose = false;
                }

                if (navInfo[i].secondNavShow && param) {
                    for (let j = 0; j < navInfo[i].children.length; j ++) {    
                        navInfo[i].children[j].isChoose = param === navInfo[i].children[j].secondNavName;
                    }    
                }
                let children = navInfo[i].children;
                navInfo[i].children = [];
                navInfo[i].children = children;
            }

            

        }        

    },

    computed: {

    },
    watch: {
        '$route' (to, from) {
            
            this.listenRoute();
        }
    }
    
}
</script>

<style lang="stylus" scoped>
    .el-icon-info
        font-size 12px
        margin-right 5px
        color #8AA4AF
    .nav
        width 100%
        height 100%
        background #20222A
        float left
        display flex
        flex-direction column
        align-items center
        .title-box 
            width 100%
            height 1.2rem
            display flex
            align-items center;
            justify-content center
            .title
                color whitesmoke
                font-size .3rem
                user-select none
        .ope-choose
            background #009688
            .operation-name
                color white
            .icon
                color white
        .ope-not-choose 
            .operation-name
                color #BDBDC0
            .icon 
                color #BDBDC0
        .operation
            width 100%
            display flex
            cursor pointer
            flex-wrap wrap
            &:hover
                .icon, .operation-name
                    color white
            .second-nav-box 
                width 100%
                background #2C3B41
                transition 0.3s
                .second-nav-list-box
                    width 100%
                    float right
                    display flex
                    flex-direction column
                    align-items center
                    .kind-name-box
                        width 100%
                        height 40px
                        display flex
                        align-items center 
                        justify-content center
                        p
                            color #8AA4AF
                            font-size .27rem
                            margin 0
                            padding 0
                            
                        &:hover
                            p, i
                                color white
                                user-select none
            .main-box
                width 100%
                display flex
                height 1rem
                .icon-box
                    width 30%
                    height 100%
                    display flex
                    align-items center
                    justify-content flex-end
                    .icon
                        font-size .30rem
                        user-select none
                    
                .name-box
                    width 70%
                    height 1rem
                    display flex
                    align-items center
                    
                    .operation-name
                        font-size .25rem
                        margin 0 0 0 .3rem
                        user-select none
                        
                        
                       
                   
            
            

</style>


